<template>
  <div>
    <h3>子组件的显示,隐藏,初始化,销毁,created,monted</h3>
    <div>
      <h4>使用v-if显示隐藏子组件,每次显示都会创建新的子组件</h4>
      <div>
        <button @click="visibleIf=true">显示子组件</button>
        <button @click="visibleIf=false">隐藏子组件</button>
      </div>
      <div>
        <visible-comp v-if="visibleIf"></visible-comp>
      </div>
    </div>
    <div>
      <h4>使用v-show显示隐藏子组件,不会重新创建子组件,会保留之前的状态</h4>
      <div>
        <button @click="visibleShow=true">显示子组件</button>
        <button @click="visibleShow=false">隐藏子组件</button>
      </div>
      <div>
        <visible-comp v-show="visibleShow"></visible-comp>
      </div>
    </div>
    <div>
      <h4>子组件通过控制父组件中的值来隐藏自己</h4>
      <pre>
        通过sync修饰符, 允许子组件使用#emit('update:xxx')的方式更新父组件中的值
      </pre>
      <div>
        <button @click="visible3=true">显示子组件</button>
        <button @click="visible3=false">隐藏子组件</button>
      </div>
      <div>
        <visible-comp2
          v-show="visible3"
          :visible.sync='visible3'
        ></visible-comp2>
      </div>
    </div>
  </div>
</template>

<script>
import VisibleComp from './VisibleComp'
import VisibleComp2 from './VisibleComp2'
export default {
  components: {
    VisibleComp,
    VisibleComp2
  },
  data() {
    return {
      visibleIf: false,
      visibleShow: false,
      visible3: false
    }
  }
}
</script>
